Анімація
Vue.js дозволяє виконувати анімацію елементів за допомогою:
- CSS стилів
- виконана анімацію за допомогою JavaScript
- використовувати стороні бібліотеки для анімації
<transition>
При появі і приховуванні елемента Vue.js додає відповідні класи до цього елемента. Щоб Vue.js застосовував анімацію і додавав класи необхідно елементи вказати у тег transition з атрибутом name - назвою анімації.
- Класи для появи елемента:
- name-enter - появляться елемент
- name-enter-active - активна анімація
- name-enter-to - кінець анімації
- Класи для приховування елемента:
- name-leave - приховується елемент елемент
- name-leave-active - активна анімація
- name-leave-to - кінець анімації
Приклад анімації з використанням transition:
Приклад анімації Vue.js!
<div id="test">
<button v-on:click="visible=!visible">{{visible}}</button> <transition name="anime"><div v-show="visible">Приклад анімації Vue.js!</div></transition>
</div>
<style>
.anime-enter-active, .anime-leave-active{transition: all .3s;}
.anime-enter{opacity:0; color: blue;}
.anime-enter-to{opacity:1; color: black;}
.anime-leave{opacity:1; color:black;}
.anime-leave-to{opacity:0; color:blue;}
</style>
new Vue({el:'#test', data:{visible:true}});
Приклад:
Анімація у фреймворку Vue.js.
new Vue({el:'#app', data:{state:true}});
<div id="app2">
<div class="div-palpitation">
<transition name="img-palpitation">
<img v-if="show" src="https://vuejs.org/images/logo.png" />
</transition>
</div>
<button v-on:click="show=!show">Анімація</button>
</div>
<style>
.div-palpitation{
min-height: 400px; /* висота зображення */
}
.img-palpitation-enter-active {
animation: palpitation-in .5s;
}
.img-palpitation-leave-active {
animation: palpitation-in .5s reverse;
}
@keyframes palpitation-in {
0%{transform: scale(0);}
25%{transform: scale(1.5);}
50%{transform: scale(0.7);}
75%{transform: scale(1.7);}
100%{transform: scale(1);}
}
</style>
new Vue({el:'#app2', data:{show:true}});